<template>
  <w-move-view
    class="com-mobile-move-menu-btn w-round w-flex-center"
    :width="50"
    :left="left"
    :top="top"
    :height="50">
    <div
      class="content-box"
      :class="{ action: one ? true : isShow, one: one }">
      <slot/>
    </div>
    <add-icon
      v-if="!one"
      width="50px"
      height="50px"
      class="add-icon"
      @click="isShow = !isShow"
      :class="{ action: isShow }"
      fill="#fff"/>
  </w-move-view>
</template>

<script>
  import WMoveView from '../dragView/index'
  import AddIcon from '../../../icons/add.svg'
  export default {
    name: "ComMobileMoveMenuBtn",
    components: {
      WMoveView,
      AddIcon
    },
    props: {
      /**
       * 是否有一个按钮，如有是一个按钮就不会弹窗
       */
      one: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        isShow: false,
        left: document.documentElement.clientWidth - 70,
        top: document.documentElement.clientHeight - 70
      }
    }
  }
</script>

<style lang="scss">
  .com-mobile-move-menu-btn {
    background-color: rgba(11,95,204,.8);
    .content-box {
      position: absolute;
      width: 100%;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      transition: all .5s;
      bottom: 60px;
      svg {
        width: 44px;
        height: 44px;
        background-color: rgba(3, 3, 3, .5);
        border-radius: 50%;
        padding: 8px;
        fill: #fff;
        margin-bottom: 10px;
      }
      svg:last-child {
        margin-bottom: 3px;
      }
    }
    .content-box.one {
      bottom: 0;
      svg {
        background-color: rgba(0,0,0,0);
      }
    }
    .action {
      opacity: 1;
    }
    .add-icon {
      padding: 10px;
      transition: all .5s;
    }
    .add-icon.action {
      transform:rotate(-45deg);
    }
  }
</style>
